<template>
  <div class="menu-container">
    <el-menu router :default-active="activePath" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
      <template v-for="(item, index) in menus">
        <el-submenu class="big" :index="item.path" :key="index" v-if="!item.hidden">
          <template slot="title">
            <span slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item-group v-for="(child, index) in item.children" :key="index">
            <el-submenu :index="child.path" v-if="!item.hidden">
              <template slot="title">
                <span slot="title">{{ child.name }}</span>
              </template>
              <el-menu-item-group v-for="(child, index) in child.children" :key="index">
                <el-menu-item :index="child.path">
                  {{ child.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu-item-group>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        menus: [],
        activePath: "",
      };
    },
    created() {
      this.menus = [...this.$router.options.routes];
      this.activePath = this.menus[2].children[0].children[0].path;
      console.log(this.menus);
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    },
  };
</script>
<style scoped>
  .menu-container {
    height: 500px;
  }

  .big {
    width: 200px;
  }

  .head {
    display: flex;
    margin: 0;
    padding: 0;
  }

  .head-right {
    width: 100%;
  }

  .home-left {
    width: 200px;
    border-left: none;
    overflow: auto;
    /* height: 100%; */
  }

  .el-menu-item {
    height: 20%;
    color: black;
  }

  .el-menu {
    border: none;
  }

  .head-right {
    width: 100%;
  }

  .el-main {
    /* background-color: #e9eef3; */
    color: #333;
    text-align: center;
    padding: 0;
  }

  .el-footer {
    padding: 0;
  }
</style>
